<script setup>
import { ref, onMounted, computed } from 'vue'

// 游戏状态
const resources = ref({
  gold: 1000,
  elixir: 1000,
  gems: 100
})

const buildings = ref([])
const selectedBuilding = ref(null)
const gameLevel = ref(1)

// 建筑类型定义
const buildingTypes = {
  townHall: {
    name: '大本营',
    icon: '🏰',
    cost: { gold: 0 },
    size: { width: 3, height: 3 },
    hp: 1000,
    production: { gold: 10, elixir: 10 },
    maxLevel: 5
  },
  goldMine: {
    name: '金矿',
    icon: '⛏️',
    cost: { gold: 200 },
    size: { width: 2, height: 2 },
    hp: 400,
    production: { gold: 20 },
    maxLevel: 3
  },
  elixirCollector: {
    name: '圣水收集器',
    icon: '⚗️',
    cost: { gold: 200 },
    size: { width: 2, height: 2 },
    hp: 400,
    production: { elixir: 20 },
    maxLevel: 3
  },
  cannon: {
    name: '加农炮',
    icon: '💣',
    cost: { gold: 400 },
    size: { width: 2, height: 2 },
    hp: 500,
    damage: 50,
    maxLevel: 3
  },
  wall: {
    name: '城墙',
    icon: '🧱',
    cost: { gold: 100 },
    size: { width: 1, height: 1 },
    hp: 300,
    maxLevel: 3
  }
}

// 网格大小
const GRID_SIZE = 20
const grid = ref(Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(null)))

// 计算当前资源产量
const resourceProduction = computed(() => {
  const production = { gold: 0, elixir: 0 }
  buildings.value.forEach(building => {
    if (buildingTypes[building.type].production) {
      Object.entries(buildingTypes[building.type].production).forEach(([resource, amount]) => {
        production[resource] += amount * building.level
      })
    }
  })
  return production
})

// 选择建筑进行放置
const selectBuilding = (type) => {
  if (resources.value.gold >= buildingTypes[type].cost.gold) {
    selectedBuilding.value = {
      type,
      level: 1,
      ...buildingTypes[type]
    }
  } else {
    alert('资源不足！')
  }
}

// 检查位置是否可用
const isPositionAvailable = (x, y, building) => {
  if (x < 0 || y < 0 || x + building.size.width > GRID_SIZE || y + building.size.height > GRID_SIZE) {
    return false
  }
  
  for (let i = x; i < x + building.size.width; i++) {
    for (let j = y; j < y + building.size.height; j++) {
      if (grid.value[i][j] !== null) {
        return false
      }
    }
  }
  return true
}

// 放置建筑
const placeBuilding = (x, y) => {
  if (!selectedBuilding.value) return
  
  if (isPositionAvailable(x, y, selectedBuilding.value)) {
    const building = {
      ...selectedBuilding.value,
      x,
      y,
      id: Date.now()
    }
    
    // 扣除资源
    resources.value.gold -= buildingTypes[building.type].cost.gold
    
    // 更新网格
    for (let i = x; i < x + building.size.width; i++) {
      for (let j = y; j < y + building.size.height; j++) {
        grid.value[i][j] = building.id
      }
    }
    
    buildings.value.push(building)
    selectedBuilding.value = null
  }
}

// 升级建筑
const upgradeBuilding = (building) => {
  const cost = buildingTypes[building.type].cost.gold * building.level * 2
  if (resources.value.gold >= cost && building.level < buildingTypes[building.type].maxLevel) {
    resources.value.gold -= cost
    building.level += 1
  } else {
    alert('资源不足或已达到最高等级！')
  }
}

// 收集资源
const collectResources = () => {
  Object.entries(resourceProduction.value).forEach(([resource, amount]) => {
    resources.value[resource] += amount
  })
}

// 自动收集资源
setInterval(collectResources, 5000)

// 初始化游戏
onMounted(() => {
  // 放置初始大本营
  const initialTownHall = {
    ...buildingTypes.townHall,
    type: 'townHall',
    level: 1,
    x: Math.floor(GRID_SIZE / 2) - 1,
    y: Math.floor(GRID_SIZE / 2) - 1,
    id: Date.now()
  }
  
  placeBuilding(initialTownHall.x, initialTownHall.y)
})
</script>

<template>
  <div class="clash-game">
    <div class="game-header">
      <h1>部落冲突</h1>
      <div class="resources">
        <div class="resource">
          <span>金币: {{ resources.gold }}</span>
          <span class="production">(+{{ resourceProduction.gold }}/5s)</span>
        </div>
        <div class="resource">
          <span>圣水: {{ resources.elixir }}</span>
          <span class="production">(+{{ resourceProduction.elixir }}/5s)</span>
        </div>
        <div class="resource">宝石: {{ resources.gems }}</div>
      </div>
    </div>

    <div class="game-controls">
      <div class="building-menu">
        <button 
          v-for="(building, type) in buildingTypes" 
          :key="type"
          @click="selectBuilding(type)"
          :class="{ selected: selectedBuilding?.type === type }"
        >
          {{ building.icon }} {{ building.name }}
          ({{ building.cost.gold }}金币)
        </button>
      </div>
    </div>

    <div class="game-grid" @click="selectedBuilding = null">
      <div 
        v-for="(row, x) in grid" 
        :key="x" 
        class="grid-row"
      >
        <div 
          v-for="(cell, y) in row" 
          :key="y"
          class="grid-cell"
          @click.stop="placeBuilding(x, y)"
        >
          <template v-if="cell !== null">
            <div 
              v-for="building in buildings"
              :key="building.id"
              v-show="building.id === cell"
              class="building"
              @click.stop="upgradeBuilding(building)"
            >
              {{ building.icon }}
              <span class="building-level">{{ building.level }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.clash-game {
  padding: 20px;
  background: #f0f0f0;
  min-height: 100vh;
}

.game-header {
  text-align: center;
  margin-bottom: 20px;
}

.resources {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0;
  font-size: 18px;
}

.resource {
  background: white;
  padding: 8px 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.production {
  color: #666;
  font-size: 14px;
  margin-left: 5px;
}

.building-menu {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.building-menu button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.building-menu button:hover {
  background: #eee;
}

.building-menu button.selected {
  background: #4CAF50;
  color: white;
}

.game-grid {
  display: inline-block;
  background: #8BC34A;
  padding: 10px;
  border-radius: 8px;
}

.grid-row {
  display: flex;
}

.grid-cell {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.1);
  cursor: pointer;
}

.grid-cell:hover {
  background: rgba(255,255,255,0.2);
}

.building {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.building-level {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1px 3px;
  border-radius: 2px;
}
</style> 